<template>
	<view class="content statusBarHeight">
		<view class='header-part'>
			<view class='page-name'>
				商城
			</view>
			<view class="input-content">
				<image src="../../static/index/search.png" class="search-img" @tap="searchGoods"></image>
				<input v-model="search" placeholder="搜索你想找的商品" placeholder-class="placeholder" @blur="searchGoods" />
			</view>
		</view>
		<view class='level2-filtter'>
			<view class='filtter-item' v-for="(item,index) in navList" :key="index"
				:class="navId == item.id?'active':''" @tap="selectNav(item)">
				{{item.title}}
			</view>
		</view>
		<view class="second-title">
			<view class="goods-nav-list">
				<view class="goods-nav" :class="goodsNavId == item.id?'active-goods':'before-goods'"
					v-for="(item,index) in goodsNav" :key="index" @tap="selectGoodsNav(item)">
					<image :src="item.iconUrl" mode=""></image>
					{{item.categoryName}}
				</view>
			</view>
		</view>
		<view class='goods-content'>
			<view class="goodsList" v-show="list.length!=0">
				<scroll-list ref="list" :option="{
						page: pageNum, // 分s页
						size: 10, // 分页大小
						auto:false}" @load="e=>getGoodsList(1)" @refresh="e=>getGoodsList(2)">
					<view class="goods-item">
						<view class="leftList">
							<view class="goods-info" v-for="(item,index) in leftList" :key="index"
								@tap="goDetail(item)">
								<image :src="item.coverUrl" class="goods-img" mode="widthFix"></image>
								<view class='flex-right'>
									<view class="goods-title elliptical2">
										<text>新品</text>
										{{item.title}}
									</view>
									<view class="bottom">
										<view class='goods-info-btn'>
											<view class="price">
												</image>
												¥{{navId == 1||navId == 6||navId == 5?item.money:item.voucher }}
											</view>
										</view>
										<view class='successCount'>已售2w+</view>

									</view>
								</view>
							</view>
						</view>
						<view class="rightList">
							<view class="goods-info" v-for="(item,index) in rightList" :key="index"
								@tap="goDetail(item)">
								<image :src="item.coverUrl" class="goods-img" mode="widthFix"></image>
								<view class='flex-right'>
									<view class="goods-title elliptical2">
										<text>新品</text>
										{{item.title}}
									</view>
									<view class="bottom">
										<view class='goods-info-btn'>
											<view class="price">
												</image>
												¥{{navId == 1||navId == 6||navId == 5?item.money:item.voucher }}
											</view>
										</view>
										<view class='successCount'>已售2w+</view>

									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-list>

			</view>
			<div style='width: 100%;height: 100%;display: flex;justify-content: center;align-items: flex-start;padding-top: 50rpx;'
				v-if='list.length<=0'>
				<view class="noneContent">
					<image src="@/static/static-home/empty.png" class="noneImg"></image>
					<view class="text">持续上架中~</view>
				</view>
			</div>
		</view>



	</view>
</template>

<script>
	import {
		myVoucherCategoryList,
		myVoucherGoodsPage
	} from '../../api/api.js'
	import scrollList from "../../components/scroll-list/scroll-list.vue"
	export default {
		data() {
			return {
				pageSize: 10,
				pageNum: 1,
				// pages: '',
				navId: 1,
				navList: [{
						id: 1,
						title: '购物区'
					},
					{
						id: 2,
						title: '提货区'
					},
					{
						id: 4,
						title: '配额区'
					}, {
						id: 5,
						title: '生活区'
					}, {
						id: 6,
						title: '助力商城'
					}
					// {
					// 	id: 3,
					// 	title: '易货区'
					// },
					// {
					// 	id: 4,
					// 	title: 'VIP推荐'
					// },
					// {
					// 	id: 5,
					// 	title: '尊享推荐'
					// },
					// {id:3,title:'组合区'},
				],
				search: '',
				goodsNavId: '',
				goodsNav: [],
				list: [],
				leftList: [],
				rightList: [],
				loading: true
			}
		},
		components: {
			scrollList,
		},
		onShow() {
			this.pageNum = 1
			this.list = []
			// 获取分类列表
			this.getCategoryList()
			// 获取商品列表
			// this.getGoodsList()
		},
		// onReachBottom() {
		// 	if (this.pages <= this.pageNum) {
		// 		uni.showToast({
		// 			icon: 'none',
		// 			title: '暂无更多~'
		// 		})
		// 		return
		// 	} else {
		// 		this.pageNum++
		// 		// 获取商品列表
		// 		this.getGoodsList(1)
		// 	}
		// },
		methods: {
			// 获取分类列表
			getCategoryList() {
				let data = {
					type: this.navId
				}
				myVoucherCategoryList(data).then(res => {
					this.goodsNav = res.data
					this.goodsNavId = this.goodsNav[0].id
					this.getGoodsList(1)
				})
			},
			getGoodsList(index) {
				this.loading = true
				let data = {
					queryKey: this.search,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					categoryId: this.goodsNavId,
					type: this.navId,
				}
				if (index == 2) {
					this.list = []
					this.pageNum = 1
				}
				myVoucherGoodsPage(data).then(res => {
					this.pageNum++;
					this.list = this.list.concat(res.data.records)
					this.loading = false
					this.splitList(this.list)
					if (index == 1) {
						// 加载
						this.$refs.list.loadSuccess({
							list: this.list,
							total: res.data.total
						});
					} else {
						// 刷新
						this.$refs.list.refreshSuccess({
							list: this.list,
							total: res.data.total
						});
					}
				})
			},
			splitList(newList) {
				let l_data = []
				let r_data = []
				// 按照奇偶分
				newList.forEach((item, index) => {
					if (index % 2 == 0) {
						l_data.push(item)
					} else {
						r_data.push(item)
					}
				})
				this.$nextTick(() => {
					this.leftList = l_data
					this.rightList = r_data
				})

			},
			searchGoods() {
				this.list = []
				this.pageNum = 1
				this.getGoodsList(2)
			},
			goDetail(item) {
				uni.navigateTo({
					url: '/pages/goods/goodsDetail?id=' + item.id + '&navId=' + this.navId +
						'&source=goods'
				})
			},
			selectNav(item) {
				this.list = []
				this.navId = item.id
				this.pageNum = 1
				this.getCategoryList()
			},
			selectGoodsNav(item) {
				this.list = []
				this.pageNum = 1
				this.goodsNavId = item.id
				this.getGoodsList(2)
			}
		}
	}
</script>
<style>
	page {
		background: linear-gradient(270deg, #FFA2A2 0%, #FFE5E5 100%);
	}
</style>
<style lang="less" scoped>
	.content {
		.header-part {
			width: 100vw;
			height: 116rpx;
			background: linear-gradient(270deg, #FFA2A2 0%, #FFE5E5 100%);
			display: flex;
			align-items: center;
			padding: 0 40rpx;
			box-sizing: border-box;

			.page-name {
				font-weight: bold;
				font-size: 44rpx;
				color: #3C3C3C;
			}

			.input-content {
				display: flex;
				align-items: center;
				width: 442rpx;
				height: 68rpx;
				margin-left: 76rpx;
				background: #FFFFFF;
				border-radius: 68rpx;


				.search-img {
					width: 32rpx;
					height: 32rpx;
					margin-left: 20rpx;
					margin-right: 20rpx;
				}

				.placeholder {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #959BA2;
					line-height: 37rpx;
				}
			}
		}

		.level2-filtter {
			height: 96rpx;
			background: #FFFFFF;
			border-top-right-radius: 30rpx;
			border-top-left-radius: 30rpx;
			display: flex;
			padding: 34rpx 40rpx;
			box-sizing: border-box;
			overflow-x: auto;

			.filtter-item {
				font-weight: 400;
				font-size: 32rpx;
				color: #BCBDBD;
				// white-space: nowrap;
			}

			.filtter-item:not(:last-child) {
				margin-right: 20rpx;
			}

			.active {
				font-weight: bold;
				font-size: 32rpx;
				color: #3C3C3C;
				position: relative;
				z-index: 1;
			}

			.active:before {
				content: '';
				position: absolute;
				bottom: -4rpx;
				left: 0;
				width: 100%;
				height: 8rpx;
				z-index: -1;
				background-color: #EB3B27;
			}
		}

		.second-title {
			background: #ffffff;
			padding: 26rpx 31rpx;
			margin-top: -1rpx;

			.goods-nav-list {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.goods-nav {
					display: flex;
					align-items: center;
					flex-direction: column;

					image {
						width: 82rpx;
						height: 82rpx;
						margin-bottom: 10rpx;
					}
				}

				.active-goods {
					border-radius: 12rpx;
					font-weight: 500;
					font-size: 22rpx;
					color: #EB3B27;
					margin-right: 20rpx;
					font-weight: 500;
				}

				.before-goods {
					border-radius: 12rpx;
					font-weight: 400;
					font-size: 22rpx;
					color: #676767;
					margin-right: 20rpx;
				}
			}
		}

		.goods-content {
			width: 100%;
			height: calc(100vh - 300rpx);
			margin-top: -1rpx;
			background: #fff;
			overflow: hidden;

			.goodsList {
				.goods-item {
					padding: 0 30rpx;
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					gap: 22rpx;

					/* 网格间距 */
					.goods-info {
						width: 334rpx;
						border-radius: 20rpx;
						background: #F6F6F7;
						overflow: hidden;
						margin-bottom: 26rpx;
						box-sizing: border-box;
						padding-bottom: 19rpx;

						image {
							width: 334rpx;
						}

						.flex-right {
							margin-top: 15rpx;
							padding: 0 20rpx;

							.goods-title {
								font-weight: 400;
								font-size: 26rpx;
								color: #333333;

								text {
									width: 56rpx;
									height: 28rpx;
									font-size: 20rpx;
									color: #FFFFFF;
									background: #FF0000;
									display: inline-flex;
									justify-content: center;
									align-items: center;
									border-radius: 4rpx;
									margin-right: 8rpx;
									transform: translateY(-2rpx);
								}
							}

						}

						.bottom {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 18rpx;

							.goods-info-btn {
								font-weight: 500;
								font-size: 30rpx;
								color: #FF4C4A;
							}

							.successCount {
								font-weight: 400;
								font-size: 24rpx;
								color: #9F9F9F;
							}
						}
					}
				}

			}
		}

		// 暂无内容
		.noneContent {
			display: flex;
			align-items: center;
			flex-direction: column;

			.noneImg {
				width: 198rpx;
				height: 242rpx;
			}

			.text {

				font-weight: 400;
				font-size: 20rpx;
				color: #767676;
			}
		}
	}
</style>